{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

{{#if this.importedResponse}}
  <div class="is-flex-start has-top-margin-xs">
    <div class="is-flex-grow-1 basis-0 has-text-grey has-bottom-margin-xs">
      <h2>
        Imported Issuer
      </h2>
    </div>
    <div class="is-flex-grow-1 basis-0 has-text-grey has-bottom-margin-xs">
      <h2>
        Imported Key
      </h2>
    </div>
  </div>
  <div class="box is-fullwidth is-sideless is-marginless is-paddingless" data-test-imported-bundle-mapping>
    {{#each this.importedResponse as |imported|}}
      <div
        class="box is-marginless no-top-shadow has-slim-padding"
        data-test-import-pair={{concat imported.issuer "_" imported.key}}
      >
        <div class="is-flex-start">
          <div class="is-flex-grow-1 basis-0 has-bottom-margin-xs" data-test-imported-issuer>
            {{#if imported.issuer}}
              <LinkTo @route="issuers.issuer.details" @models={{array @model.backend imported.issuer}}>
                {{imported.issuer}}
              </LinkTo>
            {{else}}
              None
            {{/if}}
          </div>
          <div class="is-flex-grow-1 basis-0 has-bottom-margin-xs" data-test-imported-key>
            {{#if imported.key}}
              <LinkTo @route="keys.key.details" @models={{array @model.backend imported.key}}>
                {{imported.key}}
              </LinkTo>
            {{else}}
              None
            {{/if}}
          </div>
        </div>
      </div>
    {{/each}}
  </div>
  <footer>
    <div class="field is-grouped is-fullwidth has-top-margin-l">
      <Hds::Button @text="Done" {{on "click" @onComplete}} data-test-done />
    </div>
  </footer>
{{else}}
  <div class="field">
    <div class="form-section">
      <label class="title is-5 has-top-padding-m" data-test-import-section-label>
        Certificate parameters
      </label>
      <form {{on "submit" (perform this.submitForm)}} data-test-pki-import-pem-bundle-form>
        <MessageError @errorMessage={{this.errorBanner}} />
        <div class="box is-sideless is-fullwidth is-marginless has-top-padding-l">
          <TextFile @onChange={{this.onFileUploaded}} @label="PEM Bundle" />
          <p class="has-top-margin-m has-bottom-margin-l">
            Issuer URLs (Issuing certificates, CRL distribution points, OCSP servers, and delta CRL URLs) can be specified by
            editing the individual issuer once it is uploaded to Vault.
          </p>
        </div>
        <Hds::ButtonSet class="has-top-padding-s">
          <Hds::Button
            @text="Import issuer"
            @icon={{if this.submitForm.isRunning "loading"}}
            type="submit"
            disabled={{this.submitForm.isRunning}}
            data-test-pki-import-pem-bundle
          />
          <Hds::Button
            @text="Cancel"
            @color="secondary"
            disabled={{this.submitForm.isRunning}}
            {{on "click" this.cancel}}
            data-test-pki-ca-cert-cancel
          />
        </Hds::ButtonSet>
      </form>
    </div>
  </div>
{{/if}}